<template>
  <div>
    <div class="hot">
      <span>热门推荐</span>
    </div>
    <div>
      <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media">
          <router-link :to="{name:'detail',params:{bs: 'gszc'}}">
            <img class="mui-media-object mui-pull-left" src="static/img/recommend2.jpg">
            <div class="mui-media-body">
              <span class="title_font">公司注册</span>
              <p class="margin_top instructions_font zh_1">创业第一步,精选好的服务</p>
              <p class='mui-ellipsis margin_top'>500元起</p>
            </div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media">
          <router-link :to="{name:'detail',params:{bs: 'sbzc'}}">
            <img class="mui-media-object mui-pull-left" src="static/img/recommend1.jpg">
            <div class="mui-media-body">
              <span class="title_font">商标注册</span>
              <p class="margin_top instructions_font zh_1">保护知识产权,维护企业合法权益</p>
              <p class='mui-ellipsis margin_top'>600元起</p>
            </div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media">
          <router-link :to="{name:'detail',params:{bs: 'dljz'}}">
            <img class="mui-media-object mui-pull-left" src="static/img/recommend3.jpg">
            <div class="mui-media-body">
              <span class="title_font">代理记账</span>
              <p class="margin_top instructions_font zh_1">专业正规会计团队,为您提供健全的记账服务</p>
              <p class='mui-ellipsis margin_top'>150元起</p>
            </div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media">
          <router-link :to="{name:'detail',params:{bs: 'gqzr'}}">
            <img class="mui-media-object mui-pull-left" src="static/img/recommend4.jpg">
            <div class="mui-media-body">
              <span class="title_font">股权转让</span>
              <p class="margin_top instructions_font zh_1">高收益,高效率的保障服务</p>
              <p class='mui-ellipsis margin_top'>1200元起</p>
            </div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media">
          <router-link :to="{name:'detail',params:{bs: 'dsdyy'}}">
            <img class="mui-media-object mui-pull-left" src="static/img/recommend5.jpg">
            <div class="mui-media-body">
              <span class="title_font">电商代运营</span>
              <p class="margin_top instructions_font zh_1">上千家网点店主一致信赖,用实效说话</p>
              <p class='mui-ellipsis margin_top'>2000元起</p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Hot"
  }
</script>

<style scoped>
  .hot {
    line-height: 0.79rem;
    font-size: 0.26rem;
    padding-left: 0.3rem;
    color: #666;
    background-color: #f4f5f7;
  }

  .mui-ellipsis {
    color: #E75555;
  }

  .mui-table-view .mui-media-object {
    max-width: 1.97rem;
    line-height: 1.63rem;
    height: 1.63rem;
  }

  .mui-table-view:before, .mui-table-view:after {
    height: 0;
  }

  .mui-media-body {
    margin-top: 0.2rem;
  }

  .mui-media-body span {
    font-size: 0.3rem;
    height: 0.47rem;
    line-height: 0.47rem;
  }

  .mui-media-body p {
    font-size: 0.27rem;
    height: 0.31rem;
    line-height: 0.31rem;
  }
  .mui-table-view-cell {
    padding: 0.25rem;
  }
  .mui-table-view-cell > a:not(.mui-btn) {
    margin: 0;
    padding: 0;
  }

  .margin_top{
    margin-top: 0.1rem;
  }

  .zh_1{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }

  .instructions_font{
    font-size: 0.23rem;
  }

  .title_font{
    color: black;
  }

</style>
